<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License. 
-->
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css">
    <style type="text/css">
        .dp-highlighter {
            width:95% !important;
        }
    </style>
    <style type="text/css">
        .footer {
            background-image:      url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif');
            background-repeat:     repeat-x;
            background-position:   left top;
            padding-top:           4px;
            color:                 #666;
        }
    </style>
    <link href='https://struts.apache.org/highlighter/style/shCoreStruts.css' rel='stylesheet' type='text/css' />
    <link href='https://struts.apache.org/highlighter/style/shThemeStruts.css' rel='stylesheet' type='text/css' />
    <script src='https://struts.apache.org/highlighter/js/shCore.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushPlain.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushXml.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJava.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJScript.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushGroovy.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushBash.js' type='text/javascript'></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript" language="javascript">
        var hide = null;
        var show = null;
        var children = null;

        function init() {
            /* Search form initialization */
            var form = document.forms['search'];
            if (form != null) {
                form.elements['domains'].value = location.hostname;
                form.elements['sitesearch'].value = location.hostname;
            }

            /* Children initialization */
            hide = document.getElementById('hide');
            show = document.getElementById('show');
            children = document.all != null ?
                    document.all['children'] :
                    document.getElementById('children');
            if (children != null) {
                children.style.display = 'none';
                show.style.display = 'inline';
                hide.style.display = 'none';
            }
        }

        function showChildren() {
            children.style.display = 'block';
            show.style.display = 'none';
            hide.style.display = 'inline';
        }

        function hideChildren() {
            children.style.display = 'none';
            show.style.display = 'inline';
            hide.style.display = 'none';
        }
    </script>
    <title>Using Tags</title>
</head>
<body onload="init()">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr class="topBar">
        <td align="left" valign="middle" class="topBarDiv" align="left" nowrap>
            &nbsp;<a href="home.html">Home</a>&nbsp;&gt;&nbsp;<a href="tutorials.html">Tutorials</a>&nbsp;&gt;&nbsp;<a href="bootstrap.html">Bootstrap</a>&nbsp;&gt;&nbsp;<a href="using-tags.html">Using Tags</a>
        </td>
        <td align="right" valign="middle" nowrap>
            <form name="search" action="https://www.google.com/search" method="get">
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="oe" value="UTF-8" />
                <input type="hidden" name="domains" value="" />
                <input type="hidden" name="sitesearch" value="" />
                <input type="text" name="q" maxlength="255" value="" />
                <input type="submit" name="btnG" value="Google Search" />
            </form>
        </td>
    </tr>
</table>

<div id="PageContent">
    <div class="pageheader" style="padding: 6px 0px 0px 0px;">
        <!-- We'll enable this once we figure out how to access (and save) the logo resource -->
        <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"-->
        <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div>
        <div style="margin: 0px 10px 8px 10px"  class="pagetitle">Using Tags</div>

        <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;">
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=23381">
                <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=23381">Edit Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">
                <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a>
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">Browse Space</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=23381">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=23381">Add Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=23381">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add News"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=23381">Add News</a>
        </div>
    </div>

    <div class="pagecontent">
        <div class="wiki-content">
            <div id="ConfluenceContent"><p>In the <a shape="rect" href="hello-world.html">Hello World</a> lesson, we presented a page with a simple Welcome message. In the <em>Using Tags</em> lesson, we create a Welcome page with links to other actions in the application. </p>

<p>Web applications differ from conventional websites in that web applications can create a dynamic response. To make it easier to reference dynamic data from a page, the framework offers a set of tags. Some of the tags mimic standard HTML tag while providing added value. Other tags create non-standard, but useful controls. </p>

<p>One use of the Struts Tags is to create links to other web resources, especially to other resources in the local application. </p>

<div class="confluence-information-macro confluence-information-macro-tip"><span class="aui-icon aui-icon-small aui-iconfont-approve confluence-information-macro-icon"></span><div class="confluence-information-macro-body">
<p>While HTML provides a simple <code>a</code> tag for creating hyperlinks, the HTML tag often requires us to include redundant information. Also the HTML tag cannot easily access dynamic data provided by the framework.</p></div></div>

<h2 id="UsingTags-Linking">Linking </h2>

<p>A very common use case in web applications is linking to other pages. Now that we know Struts is up and running, let's add a Welcome page with links to other actions.</p>

<div class="panel" style="border-width: 1px;"><div class="panelContent">
<p><span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image" src="using-tags.data/Welcome.PNG"></span></p>
</div></div>

<h3 id="UsingTags-TheCode">The Code</h3>
<div class="code panel pdl" style="border-style: solid;border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;border-bottom-style: solid;"><b>Welcome.jsp</b></div><div class="codeContent panelContent pdl">
<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;">
&lt;%@ taglib prefix="s" uri="/struts-tags" %&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;link href="&lt;s:url value="/css/tutorial.css"/&gt;" rel="stylesheet"
          type="text/css"/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h3&gt;Commands&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="&lt;s:url action="Register"/&gt;"&gt;Register&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="&lt;s:url action="Logon"/&gt;"&gt;Sign On&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div></div>

<p>Another common use case is using a link to change locales. On the HelloWorld page, let's add links to change the user's locale and to display a message from the application resources. </p>

<div class="panel" style="border-width: 1px;"><div class="panelContent">
<p><span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image" src="using-tags.data/HelloWorld.PNG"></span></p>
</div></div>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>HelloWorld.jsp</b></div><div class="codeContent panelContent pdl">
<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;">
&lt;body&gt;
&lt;h2&gt;&lt;s:property value="message"/&gt;&lt;/h2&gt;

&lt;h3&gt;Languages&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;
        &lt;s:url var="url" action="Welcome"&gt;
            &lt;s:param name="request_locale"&gt;en&lt;/s:param&gt;
        &lt;/s:url&gt;
        &lt;s:a href="%{url}"&gt;English&lt;/s:a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;s:url var="url" action="Welcome"&gt;
            &lt;s:param name="request_locale"&gt;es&lt;/s:param&gt;
        &lt;/s:url&gt;
        &lt;s:a href="%{url}"&gt;Espanol&lt;/s:a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
</pre>
</div></div>

<div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body">
<p>The <code>var</code> attribute (used in the <code>&lt;s:url...&gt;</code> tags) was introduced in Struts 2.1; use the <code>id</code> attribute in its place with Struts 2.0.</p></div></div>

<h3 id="UsingTags-HowtheCodeWorks">How the Code Works</h3>

<p>"%{url}" will be evaluated to the url defined with the s:url tag. On the Welcome and HelloWorld pages, we use two different Struts tags to create links. We create </p>

<ul><li>Resource links</li><li>Direct links, and</li><li>Links with parameters.</li></ul>


<p>Let's look at each in turn. </p>

<h4 id="UsingTags-Resourcelinks">Resource links </h4>

<p>First, in the head element, we use the <code>url</code> tag to inject a page reference into the HTML <code>link</code> tag. </p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;link href="&lt;s:url value="/css/tutorial.css"/&gt;" 
  rel="stylesheet" type="text/css"/&gt;
</pre>
</div></div>

<p>Note that the reference is absolute. We can move the page containing the link around without worrying about resolving relative references.</p>

<p>The <code>url</code> tag will also inject the web application context name.</p>

<h4 id="UsingTags-Directlinks">Direct links</h4>

<p>In the "Commands" section, we use the <code>url</code> tag again, to link to a Struts 2 Action. </p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;li&gt;&lt;a href="&lt;s:url action="Register"/&gt;"&gt;Register&lt;/a&gt;&lt;/li&gt;
</pre>
</div></div>

<p>When the link is rendered, the tag will automatically append the appropriate extension, so that we do not need to embed that information across the application. </p>

<p>The tag will also URL-encode the link with the Java session ID, if needed, so that the Java session can be retained across requests. </p>

<h4 id="UsingTags-Linkswithparameters">Links with parameters</h4>

<p>Finally, in the Languages section on the HelloWorld page, we use the <code>url</code> tag along with the <code>param</code> and <code>a</code> tags to create a link with request parameters. </p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;s:url var="url" action="Welcome"&gt;
  &lt;s:param name="request_locale"&gt;en&lt;/s:param&gt;
&lt;/s:url&gt;
&lt;s:a href="%{url}"&gt;English&lt;/s:a&gt;
</pre>
</div></div>

<p>This <code>param</code> tag will add the parameter "?request_locale=en" to the <code>Welcome</code> Action URL, and store it under the name "url". The <code>a</code> tag then injects the "url" reference into the hyperlink. This request_locale parameter will be picked up by the <a shape="rect" href="i18n-interceptor.html">I18n Interceptor</a>, and change your Locale accordingly.</p>

<p><img class="emoticon emoticon-tick" src="https://cwiki.apache.org/confluence/s/en_GB/5982/f2b47fb3d636c8bc9fd0b11c0ec6d0ae18646be7.1/_/images/icons/emoticons/check.png" data-emoticon-name="tick" alt="(tick)"> Any number of parameters can be added to the URI by adding more <code>param</code> tags.</p>

<h2 id="UsingTags-WildcardMappings">Wildcard Mappings</h2>

<p>Since the Welcome page is nothing but links, we don't need an Action class. We'll still use a mapping, however, so we can use an action URI. If we link only to actions, and never to pages, then it's easy to add an Action class later. </p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;action name="Welcome" &gt;
  &lt;result&gt;/Welcome.jsp&lt;/result&gt;
&lt;/action&gt;
</pre>
</div></div>

<p>As we create the application, we will often want to go directly to a page. To make prototyping easy, we can change the Welcome entry to a wilcard mapping. </p>

<h3 id="UsingTags-TheCode.1">The Code</h3>

<div class="code panel pdl" style="border-style: solid;border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;border-bottom-style: solid;"><b>struts.xml</b></div><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;action name="*" &gt;
  &lt;result&gt;/{1}.jsp&lt;/result&gt;
&lt;/action&gt;
</pre>
</div></div>

<h3 id="UsingTags-HowtheCodeWorks.1">How the Code Works </h3>

<p>If no other mapping matches, the framework will </p>

<ul><li>match "Welcome" to the asterisk, and</li><li>substitute "Welcome" for any "{1}" tokens in the mapping.</li></ul>


<p>Likewise, if there is a link to a "Login" action, and nothing else matches, then the "/Login.jsp" page is returned instead. </p>

<p><img class="emoticon emoticon-tick" src="https://cwiki.apache.org/confluence/s/en_GB/5982/f2b47fb3d636c8bc9fd0b11c0ec6d0ae18646be7.1/_/images/icons/emoticons/check.png" data-emoticon-name="tick" alt="(tick)"> Wildcard mappings let you create your own conventions, so that you can avoid redundant configuration. The <strong>first</strong> mapping that matches a request wins. (So put a mapping like <code>&lt;action name="*" &gt;</code> <strong>last</strong>!)</p>

<p>If you are coding along, you can replace the Welcome action in your <code>struts.xml</code> with the Wildcard version.</p>

<h2 id="UsingTags-DataEntryForms">Data Entry Forms</h2>

<p>Most applications will use several data entry forms. The Struts Tags make creating input forms easy. </p>

<div class="panel" style="border-width: 1px;"><div class="panelContent">
<p><span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image" src="using-tags.data/Logon.PNG"></span></p>
</div></div>

<h3 id="UsingTags-TheCode.2">The Code</h3>
<div class="code panel pdl" style="border-style: solid;border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;border-bottom-style: solid;"><b>Logon.jsp</b></div><div class="codeContent panelContent pdl">
<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;">
&lt;%@ taglib prefix="s" uri="/struts-tags" %&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Login&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;s:form action="Logon"&gt; 
  &lt;s:textfield label="User Name" name="username"/&gt;
  &lt;s:password label="Password" name="password" /&gt;
  &lt;s:submit/&gt;
&lt;/s:form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div></div>

<h3 id="UsingTags-HowTheCodeWorks">How The Code Works</h3>

<ul><li>The JSP engine reads the taglib reference at the top of the page and loads the Struts Tags for use with this page under the prefix "s".</li><li>The Struts Tags &#8211; textfield, password, and submit &#8211; each emit the appropriate label and control type.</li></ul>


<h2 id="UsingTags-WhattoRemember">What to Remember </h2>

<p>The hardest part of writing a web application can be coding the pages. The framework makes coding pages easier by providing a set of custom tags. The Struts Tags can access dynamic data provided by the framework. Tags reduce the amount of markup needed to create a page. </p>

<p><img class="emoticon emoticon-light-on" src="https://cwiki.apache.org/confluence/s/en_GB/5982/f2b47fb3d636c8bc9fd0b11c0ec6d0ae18646be7.1/_/images/icons/emoticons/lightbulb_on.png" data-emoticon-name="light-on" alt="(lightbulb)"> For more about Struts Tags, see the <a shape="rect" href="tag-developers-guide.html">Tag Developers Guide</a>.<br clear="none">
<img class="emoticon emoticon-light-on" src="https://cwiki.apache.org/confluence/s/en_GB/5982/f2b47fb3d636c8bc9fd0b11c0ec6d0ae18646be7.1/_/images/icons/emoticons/lightbulb_on.png" data-emoticon-name="light-on" alt="(lightbulb)"> For more on how to access action members, request attributes and others from pages, see <a shape="rect" href="ognl.html">OGNL</a>.</p>

<div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> Next </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> Onward to <a shape="rect" href="coding-actions.html">Coding Actions</a> </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> Prev </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> Return to <a shape="rect" href="hello-world.html">Hello World</a> </p></td></tr></tbody></table></div></div>
        </div>

        
    </div>
</div>
<div class="footer">
    Generated by CXF SiteExporter
</div>
</body>
</html>
